<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>canvas 基础｛绘制无差动画｝{基本写法}</title>
<style type="text/css">
#canvas{border: 1px solid #ccc;}
</style>
</head>
<body>
<p>摁下上下左右按键，控制人物行走</p>
   <canvas id="canvas" width="600" height="400">
      <p>Your browserdoes not support the canvas element.</p>  
   </canvas>
</body>
<script type="text/javascript">
// drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight,destX, destY, destWidth, destHeight){图片，裁剪位置X,裁剪位置Y，裁剪位置宽,裁剪位置高，图片定位X，图片定位Y，图片宽度，图片高度}

/*
原理:
1.通过截取一张大图的不同部分来展示不同的人物状态
2.同步图片不同定位，控制人物移动
*/



var bg1 = new Image();
bg1.src = "soldier.jpg";
var x=0;//裁剪定位

var pic_att={
   x:100,
   y:20,
   speed:5
}


//绘制canvas
var canvas =document.getElementById("canvas");
var context2D =canvas.getContext("2d");
// 图片加载完成后，绘制图片
bg1.onload = function(){
   context2D.drawImage(bg1,0,5,80,45,pic_att.x,pic_att.y,80,45);
};

//按下按键后调用函数，控制人物行走
function set_time(a){
   context2D.clearRect(0,0,600,400);//清除画布
   x+=80;//人物行走的位置，距离
   if(x>=640){x=0;}
   
   // 图片反转｛NND，原理还没懂｝
   if(a){
      // 水平“翻转”画布
      context2D.translate(600, 0);
      context2D.scale(-1, 1);
       // 下面画的图片是水平翻转的
      context2D.drawImage(bg1,x,5,80,45,600-80-pic_att.x,pic_att.y,80,45);
      // 画布恢复正常
      context2D.translate(600, 0);
      context2D.scale(-1, 1);
   }else{
      context2D.drawImage(bg1,x,5,80,45,pic_att.x,pic_att.y,80,45);
   }
}

// keycode:37(左),38(上),39(右),40(下),
//图片移动
function move(keycode){
   if(keycode==37){
      pic_att.x=pic_att.x-pic_att.speed;
      // console.log(pic_att.x);
      set_time(false);
   }
   if(keycode==39){
      pic_att.x=pic_att.x+pic_att.speed;
      set_time(true);
   }
   if(keycode==38){
      pic_att.y=pic_att.y-pic_att.speed;
      set_time(false);
   }
   if(keycode==40){
      pic_att.y=pic_att.y+pic_att.speed;
      set_time(false);
   }
}

// 侦听键盘事件
addEventListener("keydown",function(e){
   // console.log(e.keyCode);
   move(e.keyCode);
}, false);
</script>
</html>